"use client"

import { useState, useEffect, useRef } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform, Dimensions } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import { ArrowLeft, Calendar, TrendingUp, Award, Clock } from "lucide-react-native"
import { useRouter } from "expo-router"
import { theme } from "../constants/theme"
import Animated, { useSharedValue, useAnimatedStyle, withTiming, withDelay, Easing } from "react-native-reanimated"

const { width } = Dimensions.get("window")

// 模拟的学习数据
const LEARNING_DATA = {
    totalWords: 21,
    mastered: 5,
    learning: 8,
    new: 8,
    streak: 5, // 连续学习天数
    todayLearned: 3, // 今日学习单词数
    weeklyProgress: [2, 4, 3, 5, 3, 0, 3], // 最近7天的学习单词数
    learningTime: 45, // 分钟
    masteredByDay: [
        { date: "3.10", count: 1 },
        { date: "3.11", count: 0 },
        { date: "3.12", count: 2 },
        { date: "3.13", count: 0 },
        { date: "3.14", count: 2 },
    ],
    wordsByStatus: {
        mastered: ["apple", "banana", "cat", "dog", "elephant"],
        learning: ["fish", "giraffe", "horse", "ice cream", "juice", "kite", "lion", "monkey"],
        new: ["nest", "orange", "penguin", "queen", "rabbit", "snake", "tiger", "umbrella"],
    },
}

export default function LearningDetailsScreen() {
    const router = useRouter()
    const [activeTab, setActiveTab] = useState("words") // words, trends

    // 动画值
    const headerOpacity = useSharedValue(0)
    const statsOpacity = useSharedValue(0)
    const progressOpacity = useSharedValue(0)
    const tabsOpacity = useSharedValue(0)
    const contentOpacity = useSharedValue(0)

    // 进度条动画值
    const masteredWidth = useSharedValue(0)
    const learningWidth = useSharedValue(0)
    const newWidth = useSharedValue(0)

    // 周进度动画值
    const barHeights = Array(7)
        .fill(0)
        .map(() => useSharedValue(0))
    const weeklyProgressRef = useRef(LEARNING_DATA.weeklyProgress)

    // 启动进入动画
    useEffect(() => {
        // 顺序执行动画
        headerOpacity.value = withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) })
        statsOpacity.value = withDelay(200, withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) }))
        progressOpacity.value = withDelay(400, withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) }))
        tabsOpacity.value = withDelay(600, withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) }))
        contentOpacity.value = withDelay(800, withTiming(1, { duration: 500, easing: Easing.out(Easing.ease) }))

        // 进度条动画
        const masteredPercentage = (LEARNING_DATA.mastered / LEARNING_DATA.totalWords) * 100
        const learningPercentage = (LEARNING_DATA.learning / LEARNING_DATA.totalWords) * 100
        const newPercentage = (LEARNING_DATA.new / LEARNING_DATA.totalWords) * 100

        masteredWidth.value = withTiming(masteredPercentage, { duration: 1000, easing: Easing.out(Easing.ease) })
        learningWidth.value = withTiming(learningPercentage, { duration: 1000, easing: Easing.out(Easing.ease) })
        newWidth.value = withTiming(newPercentage, { duration: 1000, easing: Easing.out(Easing.ease) })
    }, [])

    // 动画样式
    const headerAnimatedStyle = useAnimatedStyle(() => ({
        opacity: headerOpacity.value,
        transform: [{ translateY: (1 - headerOpacity.value) * -20 }],
    }))

    const statsAnimatedStyle = useAnimatedStyle(() => ({
        opacity: statsOpacity.value,
        transform: [{ translateY: (1 - statsOpacity.value) * -20 }],
    }))

    const progressAnimatedStyle = useAnimatedStyle(() => ({
        opacity: progressOpacity.value,
        transform: [{ translateY: (1 - progressOpacity.value) * -20 }],
    }))

    const tabsAnimatedStyle = useAnimatedStyle(() => ({
        opacity: tabsOpacity.value,
        transform: [{ translateY: (1 - tabsOpacity.value) * -20 }],
    }))

    const contentAnimatedStyle = useAnimatedStyle(() => ({
        opacity: contentOpacity.value,
        transform: [{ translateY: (1 - contentOpacity.value) * -20 }],
    }))

    // 进度条动画样式
    const masteredAnimatedStyle = useAnimatedStyle(() => ({
        width: `${masteredWidth.value}%`,
    }))

    const learningAnimatedStyle = useAnimatedStyle(() => ({
        width: `${learningWidth.value}%`,
    }))

    const newAnimatedStyle = useAnimatedStyle(() => ({
        width: `${newWidth.value}%`,
    }))

    const handleBack = () => {
        router.back()
    }

    // 渲染周进度条
    const renderWeeklyBars = () => {
        const days = ["一", "二", "三", "四", "五", "六", "日"]

        return (
            <View style={styles.weeklyBarsContainer}>
                {LEARNING_DATA.weeklyProgress.map((count, index) => {
                    const barAnimatedStyle = useAnimatedStyle(() => ({
                        height: `${barHeights[index].value}%`,
                    }))

                    return (
                        <View key={index} style={styles.weeklyBarItem}>
                            <View style={styles.barContainer}>
                                <Animated.View
                                    style={[
                                        styles.bar,
                                        { backgroundColor: count > 0 ? theme.colors.primary.default : theme.colors.neutral.lightGray },
                                        barAnimatedStyle,
                                    ]}
                                />
                            </View>
                            <Text style={styles.barLabel}>{days[index]}</Text>
                            <Text style={styles.barValue}>{count}</Text>
                        </View>
                    )
                })}
            </View>
        )
    }

    // 渲染单词列表
    const renderWordsList = () => {
        if (activeTab !== "words") return null

        return (
            <View style={styles.wordsListContainer}>
                <View style={styles.wordsCategoryContainer}>
                    <Text style={styles.wordsCategoryTitle}>已掌握 ({LEARNING_DATA.wordsByStatus.mastered.length})</Text>
                    <View style={styles.wordsGrid}>
                        {LEARNING_DATA.wordsByStatus.mastered.map((word, index) => (
                            <View key={index} style={[styles.wordChip, styles.masteredWordChip]}>
                                <Text style={styles.wordChipText}>{word}</Text>
                            </View>
                        ))}
                    </View>
                </View>

                <View style={styles.wordsCategoryContainer}>
                    <Text style={styles.wordsCategoryTitle}>学习中 ({LEARNING_DATA.wordsByStatus.learning.length})</Text>
                    <View style={styles.wordsGrid}>
                        {LEARNING_DATA.wordsByStatus.learning.map((word, index) => (
                            <View key={index} style={[styles.wordChip, styles.learningWordChip]}>
                                <Text style={styles.wordChipText}>{word}</Text>
                            </View>
                        ))}
                    </View>
                </View>

                <View style={styles.wordsCategoryContainer}>
                    <Text style={styles.wordsCategoryTitle}>生词 ({LEARNING_DATA.wordsByStatus.new.length})</Text>
                    <View style={styles.wordsGrid}>
                        {LEARNING_DATA.wordsByStatus.new.map((word, index) => (
                            <View key={index} style={[styles.wordChip, styles.newWordChip]}>
                                <Text style={styles.wordChipText}>{word}</Text>
                            </View>
                        ))}
                    </View>
                </View>
            </View>
        )
    }

    // 渲染趋势图表
    const renderTrends = () => {
        if (activeTab !== "trends") return null

        return (
            <View style={styles.trendsContainer}>
                <View style={styles.trendCard}>
                    <View style={styles.trendCardHeader}>
                        <TrendingUp size={20} color={theme.colors.primary.default} />
                        <Text style={styles.trendCardTitle}>掌握单词趋势</Text>
                    </View>

                    <View style={styles.trendChartContainer}>
                        {LEARNING_DATA.masteredByDay.map((item, index) => (
                            <View key={index} style={styles.trendChartItem}>
                                <View style={styles.trendBarContainer}>
                                    <View
                                        style={[
                                            styles.trendBar,
                                            {
                                                height: item.count * 30,
                                                backgroundColor:
                                                    item.count > 0 ? theme.colors.secondary.green.default : theme.colors.neutral.lightGray,
                                            },
                                        ]}
                                    />
                                </View>
                                <Text style={styles.trendBarLabel}>{item.date}</Text>
                                <Text style={styles.trendBarValue}>{item.count}</Text>
                            </View>
                        ))}
                    </View>
                </View>

                <View style={styles.predictionCard}>
                    <View style={styles.predictionHeader}>
                        <Calendar size={20} color={theme.colors.primary.default} />
                        <Text style={styles.predictionTitle}>学习预测</Text>
                    </View>

                    <View style={styles.predictionContent}>
                        <Text style={styles.predictionText}>
                            按照当前学习速度，您预计将在 <Text style={styles.highlightText}>12天</Text> 后掌握本书所有单词
                        </Text>

                        <View style={styles.predictionProgressContainer}>
                            <View style={styles.predictionProgressBar}>
                                <View
                                    style={[
                                        styles.predictionProgress,
                                        { width: `${(LEARNING_DATA.mastered / LEARNING_DATA.totalWords) * 100}%` },
                                    ]}
                                />
                            </View>
                            <Text style={styles.predictionProgressText}>
                                {LEARNING_DATA.mastered}/{LEARNING_DATA.totalWords}
                            </Text>
                        </View>

                        <TouchableOpacity style={styles.predictionButton}>
                            <Text style={styles.predictionButtonText}>制定学习计划</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }

    return (
        <SafeAreaView style={styles.container} edges={["top"]}>
            <LinearGradient
                colors={theme.colors.neutral.backgroundGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.gradientBackground}
            >
                <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
                    {/* 头部 */}
                    <Animated.View style={[styles.header, headerAnimatedStyle]}>
                        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
                            <ArrowLeft size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>
                        <Text style={styles.headerTitle}>学习详情</Text>
                        <View style={styles.headerRight} />
                    </Animated.View>

                    {/* 统计卡片 */}
                    <Animated.View style={[styles.statsContainer, statsAnimatedStyle]}>
                        <View style={styles.statsCard}>
                            <View style={styles.statsRow}>
                                <View style={styles.statItem}>
                                    <View style={[styles.statIconContainer, { backgroundColor: theme.colors.secondary.green.light }]}>
                                        <Award size={20} color={theme.colors.secondary.green.default} />
                                    </View>
                                    <View style={styles.statContent}>
                                        <Text style={styles.statValue}>{LEARNING_DATA.streak}</Text>
                                        <Text style={styles.statLabel}>连续学习</Text>
                                    </View>
                                </View>

                                <View style={styles.statDivider} />

                                <View style={styles.statItem}>
                                    <View style={[styles.statIconContainer, { backgroundColor: theme.colors.primary.light }]}>
                                        <Calendar size={20} color={theme.colors.primary.default} />
                                    </View>
                                    <View style={styles.statContent}>
                                        <Text style={styles.statValue}>{LEARNING_DATA.todayLearned}</Text>
                                        <Text style={styles.statLabel}>今日学习</Text>
                                    </View>
                                </View>

                                <View style={styles.statDivider} />

                                <View style={styles.statItem}>
                                    <View style={[styles.statIconContainer, { backgroundColor: theme.colors.secondary.orange.light }]}>
                                        <Clock size={20} color={theme.colors.secondary.orange.default} />
                                    </View>
                                    <View style={styles.statContent}>
                                        <Text style={styles.statValue}>{LEARNING_DATA.learningTime}</Text>
                                        <Text style={styles.statLabel}>学习时长(分)</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </Animated.View>

                    {/* 进度条 */}
                    <Animated.View style={[styles.progressContainer, progressAnimatedStyle]}>
                        <View style={styles.progressCard}>
                            <Text style={styles.progressTitle}>单词掌握进度</Text>

                            <View style={styles.progressBarContainer}>
                                <View style={styles.progressBar}>
                                    <Animated.View style={[styles.progressMastered, masteredAnimatedStyle]} />
                                    <Animated.View style={[styles.progressLearning, learningAnimatedStyle]} />
                                    <Animated.View style={[styles.progressNew, newAnimatedStyle]} />
                                </View>
                            </View>

                            <View style={styles.progressLegend}>
                                <View style={styles.legendItem}>
                                    <View style={[styles.legendColor, { backgroundColor: theme.colors.secondary.green.default }]} />
                                    <Text style={styles.legendText}>已掌握 ({LEARNING_DATA.mastered})</Text>
                                </View>

                                <View style={styles.legendItem}>
                                    <View style={[styles.legendColor, { backgroundColor: theme.colors.secondary.orange.default }]} />
                                    <Text style={styles.legendText}>学习中 ({LEARNING_DATA.learning})</Text>
                                </View>

                                <View style={styles.legendItem}>
                                    <View style={[styles.legendColor, { backgroundColor: theme.colors.primary.light }]} />
                                    <Text style={styles.legendText}>生词 ({LEARNING_DATA.new})</Text>
                                </View>
                            </View>
                        </View>
                    </Animated.View>

                    {/* 选项卡 */}
                    <Animated.View style={[styles.tabsContainer, tabsAnimatedStyle]}>
                        <View style={styles.tabs}>
                            <TouchableOpacity
                                style={[styles.tab, activeTab === "words" && styles.activeTab]}
                                onPress={() => setActiveTab("words")}
                            >
                                <Text style={[styles.tabText, activeTab === "words" && styles.activeTabText]}>单词</Text>
                            </TouchableOpacity>

                            <TouchableOpacity
                                style={[styles.tab, activeTab === "trends" && styles.activeTab]}
                                onPress={() => setActiveTab("trends")}
                            >
                                <Text style={[styles.tabText, activeTab === "trends" && styles.activeTabText]}>趋势</Text>
                            </TouchableOpacity>
                        </View>
                    </Animated.View>

                    {/* 内容区域 */}
                    <Animated.View style={[styles.contentContainer, contentAnimatedStyle]}>
                        {renderWordsList()}
                        {renderTrends()}
                    </Animated.View>

                    <View style={styles.bottomPadding} />
                </ScrollView>
            </LinearGradient>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
    },
    scrollView: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    backButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    headerTitle: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    headerRight: {
        width: 40,
    },
    statsContainer: {
        paddingHorizontal: theme.spacing.lg,
        marginBottom: theme.spacing.md,
    },
    statsCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    statsRow: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    statItem: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
    },
    statIconContainer: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.sm,
    },
    statContent: {
        flex: 1,
    },
    statValue: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    statLabel: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.gray,
    },
    statDivider: {
        width: 1,
        height: 40,
        backgroundColor: theme.colors.neutral.lightGray,
        marginHorizontal: theme.spacing.sm,
    },
    progressContainer: {
        paddingHorizontal: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
    },
    progressCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    progressTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.md,
    },
    progressBarContainer: {
        marginBottom: theme.spacing.md,
    },
    progressBar: {
        height: 16,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: 8,
        flexDirection: "row",
        overflow: "hidden",
    },
    progressMastered: {
        height: "100%",
        backgroundColor: theme.colors.secondary.green.default,
        position: "absolute",
        left: 0,
    },
    progressLearning: {
        height: "100%",
        backgroundColor: theme.colors.secondary.orange.default,
        position: "absolute",
        left: 0,
    },
    progressNew: {
        height: "100%",
        backgroundColor: theme.colors.primary.light,
        position: "absolute",
        left: 0,
    },
    progressLegend: {
        flexDirection: "row",
        justifyContent: "space-between",
    },
    legendItem: {
        flexDirection: "row",
        alignItems: "center",
    },
    legendColor: {
        width: 12,
        height: 12,
        borderRadius: 6,
        marginRight: theme.spacing.xs,
    },
    legendText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
    },
    weeklyProgressCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    weeklyProgressTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.md,
    },
    weeklyBarsContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "flex-end",
        height: 120,
    },
    weeklyBarItem: {
        alignItems: "center",
        flex: 1,
    },
    barContainer: {
        width: 20,
        height: 100,
        justifyContent: "flex-end",
    },
    bar: {
        width: "100%",
        borderRadius: 10,
        backgroundColor: theme.colors.primary.default,
    },
    barLabel: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
        marginTop: theme.spacing.xs,
    },
    barValue: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.gray,
    },
    tabsContainer: {
        paddingHorizontal: theme.spacing.lg,
        marginBottom: theme.spacing.md,
    },
    tabs: {
        flexDirection: "row",
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.xs,
    },
    tab: {
        flex: 1,
        paddingVertical: theme.spacing.sm,
        alignItems: "center",
        borderRadius: theme.borderRadius.medium,
    },
    activeTab: {
        backgroundColor: theme.colors.neutral.white,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.3,
                shadowRadius: 2,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    tabText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
    },
    activeTabText: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    contentContainer: {
        paddingHorizontal: theme.spacing.lg,
    },
    overviewContainer: {
        marginBottom: theme.spacing.lg,
    },
    achievementCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    achievementHeader: {
        marginBottom: theme.spacing.md,
    },
    achievementTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
    achievementContent: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    achievementImage: {
        width: 60,
        height: 60,
        marginRight: theme.spacing.md,
    },
    achievementText: {
        flex: 1,
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        lineHeight: 20,
    },
    highlightText: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    achievementButton: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderRadius: theme.borderRadius.medium,
        paddingVertical: theme.spacing.sm,
        alignItems: "center",
    },
    achievementButtonText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    suggestionsCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    suggestionsHeader: {
        marginBottom: theme.spacing.md,
    },
    suggestionsTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
    suggestionsList: {
        gap: theme.spacing.md,
    },
    suggestionItem: {
        flexDirection: "row",
        alignItems: "center",
    },
    suggestionBullet: {
        width: 8,
        height: 8,
        borderRadius: 4,
        backgroundColor: theme.colors.primary.default,
        marginRight: theme.spacing.md,
    },
    suggestionText: {
        flex: 1,
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        lineHeight: 20,
    },
    wordsListContainer: {
        marginBottom: theme.spacing.lg,
    },
    wordsCategoryContainer: {
        marginBottom: theme.spacing.lg,
    },
    wordsCategoryTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.md,
    },
    wordsGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        gap: theme.spacing.sm,
    },
    wordChip: {
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        borderRadius: theme.borderRadius.medium,
        marginBottom: theme.spacing.xs,
    },
    masteredWordChip: {
        backgroundColor: theme.colors.secondary.green.light,
    },
    learningWordChip: {
        backgroundColor: theme.colors.secondary.orange.light,
    },
    newWordChip: {
        backgroundColor: `${theme.colors.primary.default}15`,
    },
    wordChipText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
    },
    trendsContainer: {
        marginBottom: theme.spacing.lg,
    },
    trendCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    trendCardHeader: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    trendCardTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginLeft: theme.spacing.sm,
    },
    trendChartContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "flex-end",
        height: 120,
    },
    trendChartItem: {
        alignItems: "center",
        flex: 1,
    },
    trendBarContainer: {
        width: 20,
        height: 80,
        justifyContent: "flex-end",
    },
    trendBar: {
        width: "100%",
        borderRadius: 10,
        backgroundColor: theme.colors.secondary.green.default,
    },
    trendBarLabel: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
        marginTop: theme.spacing.xs,
    },
    trendBarValue: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.gray,
    },
    predictionCard: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    predictionHeader: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    predictionTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginLeft: theme.spacing.sm,
    },
    predictionContent: {
        alignItems: "center",
    },
    predictionText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        textAlign: "center",
        marginBottom: theme.spacing.md,
    },
    predictionProgressContainer: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.md,
        width: "100%",
    },
    predictionProgressBar: {
        flex: 1,
        height: 8,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: 4,
        marginRight: theme.spacing.md,
        overflow: "hidden",
    },
    predictionProgress: {
        height: "100%",
        backgroundColor: theme.colors.secondary.green.default,
    },
    predictionProgressText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
    },
    predictionButton: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderRadius: theme.borderRadius.medium,
        paddingVertical: theme.spacing.sm,
        paddingHorizontal: theme.spacing.lg,
    },
    predictionButtonText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    bottomPadding: {
        height: 40,
    },
})

